<template>
  <div>
    <el-card>
      <el-steps :active="active" finish-status="success">
        <el-step title="步骤 1"></el-step>
        <el-step title="步骤 2"></el-step>
        <el-step title="步骤 3"></el-step>
      </el-steps>
    </el-card>
    <el-button style="margin-top: 12px" @click="pre">上一步</el-button>
    <el-button style="margin-top: 12px" @click="next">下一步</el-button>
    <!-- <div style="text-align: center">
      <el-slider
        style="width: 300px"
        v-model="span"
        :max="12"
        :min="1"
        :marks="{ 1: '1', 2: '2', 3: '3' }"
        @change="spanChange"
      />
    </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      // span: 1,
    };
  },

  methods: {
    // spanChange(val) {},
    next() {
      if (this.active++ > 2) this.active = 0;
    },
    pre() {
      if (this.active-- == 0) return;
    },
  },
};
</script>

